<template>
	<view class="page">
		<view class="user-info" @click="isLogin()">
			<image class="user-pic" :src="head"></image>
			<view class="user-name">{{nickname}}</view>
		</view>
		<view class="user-link">
			<view class="link-box" @click="toHistory()">
				<view class="link-title">历史记录</view>
				<image class="link-icon" src="../../static/me/jian-r.png"></image>
			</view>
			<view class="link-box" @click="toCollect()">
				<view class="link-title">我的收藏</view>
				<image class="link-icon" src="../../static/me/jian-r.png"></image>
			</view>
			<view class="link-box" @click="toUppass()">
				<view class="link-title">修改密码</view>
				<image class="link-icon" src="../../static/me/jian-r.png"></image>
			</view>
			<view class="link-box no-border" @click="toFeedback()">
				<view class="link-title">问题反馈</view>
				<image class="link-icon" src="../../static/me/jian-r.png"></image>
			</view>
		</view>
		<view class="out-login">
			<button class="out-login-btn" type="default" @click="outLogin()">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: '登陆/注册',
				head: '../../static/me/head.png'
			}
		},
		onLoad() { // 页面加载完成
			this.isLogin()
		},
		methods: {
			toHistory() { //历史记录
				uni.navigateTo({
					url: 'history'
				});
			},
			toCollect() { //我的收藏
				uni.navigateTo({
					url: 'collect'
				});
			},
			toUppass() { //修改密码
				uni.navigateTo({
					url: 'updpass'
				});
			},
			toFeedback() { //问题反馈
				uni.navigateTo({
					url: 'feedback'
				});
			},
			isLogin() { //判断登录状态
				const userinfo = uni.getStorageSync('userinfo');
				if (userinfo) {
					this.nickname = userinfo.nickname;
					if (userinfo.sex == 1) {
						this.head = '../../static/me/boy.png';
					}
					if (userinfo.sex == 2) {
						this.head = '../../static/me/girl.png';
					}
				} else {
					this.nickname = '登陆/注册';
					uni.navigateTo({
						url: '../login/login'
					});
				}
			},
			outLogin() { //退出登录
				uni.showModal({
					title: '提示',
					content: '确定退出登录',
					confirmColor:'#FF4400',
					success: function(res) {
						if (res.confirm) {
							// 清除账号缓存
							uni.removeStorageSync('userinfo');
							// 跳转到首页
							uni.reLaunch({
								url: '../index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	.user-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 156upx;
		background-color: #FFFFFF;
		padding: 0upx 30upx;
	}

	.user-pic {
		width: 100upx;
		height: 100upx;
	}

	.user-name {
		margin-left: 30upx;
		font-size: 32upx;
	}

	.user-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0upx 30upx;
	}

	.link-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100upx;
		border-bottom: 1px solid #ddd;
	}

	.link-title {
		font-size: 28upx;
		color: #333;
	}

	.link-icon {
		width: 40upx;
		height: 40upx;
	}

	.out-login {
		margin-top: 180upx;
	}

	.out-login-btn {
		width: 80%;
		border-radius: 3px;
		color: #FF4400 !important;
		font-size: 32upx;
	}

	.out-login-btn:after {
		border: 1px solid #FF4400;
	}

	.button-hover {
		background-color: #F7F7F7 !important;
	}
</style>
